<template>
    <div class="like">
      <dl>
        <dt class="title"><img :src="title.imgUrl" :alt="title.txt"> {{ title.txt }}</dt>
        <dd class="lists">
          <ul class="clearfix pr list" v-for="item in like" :key="item.id">
            <li class="pic">
              <span class="mark pa" v-if="item.mark">{{ item.mark }}</span>
              <img class="img pa" v-if="item.mark" :src="item.markUrl" :alt="item.mark">
              <div class="d"><img class="imgs" :src="item.imgUrl" :alt="item.address"></div>
            </li>
            <li>
              <ul class="right">
                <li class="tt">{{ item.tt }}</li>
                <li class="comment flexX"><span class="iconfont stars">&#xe64a;&#xe64a;&#xe64a;&#xe64a;&#xe64a;</span><span class="number">{{ item.number }}条评论</span></li>
                <li>
                  <ul class="clearfix money">
                    <li class="l"><span class="red">￥</span><span class="red big">{{ item.money }}</span>起</li>
                    <li class="r location">{{ item.address }}</li>
                  </ul>
                </li>
                <li class="lastfont" v-if="item.messages"><span class="hide">{{ item.messages }}</span></li>
              </ul>
            </li>
          </ul>
        </dd>
        <dd class="many">查看所有产品</dd>
      </dl>
    </div>
</template>

<script>
    export default {
        props:["like"],
        data(){
          return{
            title:{
              "imgUrl": require("@/assets/img/like/logo.png"),
              "txt": "猜你喜欢"
            }
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl"
  .stars {
    color: #ffb436
  }
  .list {
    padding-bottom: .15rem
    border-bottom:1px solid #e0e0e0;
    margin-bottom: .2rem
  }
  .like {
    width: 100%
    margin-top: .2rem;
    background: #ffffff;
    font-size: .28rem;
  }
  .list>li {
    float: left;
  }
  .list .right>li {
    width: 3.5rem
  }
  .title {
    font-size: .32rem;
    margin-left: .2rem
    color: #212121;
    margin-bottom: .4rem;
  }
  .title img {
    height: .3rem;
    width: .3rem;
  }
  .pic {
    margin-right: .22rem
  }
  .pic .img {
    width: 1.02rem;
    height: .38rem;
    top: 0;
    left: .2rem;
  }
  .pic .mark {
    top: 0;
    left: .2rem;
    line-height: .38rem;
    text-indent: .04rem;
    color: #ffffff;
    font-size: .2rem;
    z-index: 1;
  }
  .pic .imgs {
    width: 2rem;
    height: 2rem;
  }
  .d {
    width: 2rem
    height: 2rem
    background: #dddddd
    margin-left: .2rem
  }
  .tt {
    $txtH();
    margin-top: .26rem;
    height: .44rem;
    color: #212121;
    font-size: .32rem;
    line-height: .44rem;
  }
  .number {
    color: #616161;
    font-size: .24rem;
    line-height: .34rem;
    vertical-align: text-bottom;
  }
  .money {
    width: 4.5rem;
    font-size: .24rem;
    margin-top: .22rem;
    color: #616161;
    line-height: .4rem;
  }
  .location {
    width: 1rem;
    $txtH();
  }
  .red {
    color: #ff8300;
    font-size: .24rem;
    line-height: .4rem;
  }
  .big {
    font-size: .4rem;
  }
  .comment {
    margin-top: .14rem;
    height: .34rem;
  }
  .lastfont {
    display: inline-block;
    margin-top: .48rem;
    margin-right: .24rem;
    background: #fff9f9;
    padding: .04rem .1rem;
    color: #f55;
    font-size: .24rem;
    line-height: .34rem;
  }
  .hide {
    display: block;
    width: 4.5rem
    $txtH();
  }
  .many {
    display: block;
    padding-bottom: .2rem;
    color: #00afc7;
    font-size: .28rem;
    line-height: .4rem;
    text-align: center
  }
</style>
